<template>
  <div id="header">
    <!-- 头 -->
    <el-header>
      <div class="header">
        <ul>
          <!-- <li>
            <div @click="personal">{{ user.username }}</div>
          </li> -->

          <li>
            <div @click="personal" v-if="user.nikeName===null||user.nikeName===''">用户</div>
            <div @click="personal" v-else>{{user.nikeName}}</div>
          </li>
          <li>
            <div @click="index">首页</div>
          </li>
          <!-- <li><div @click="mynews">我的消息</div></li>
          <li><div @click="myhouse">我的租房</div></li>
          <li><div @click="myroomie">我的室友</div></li> -->
          <li><div @click="logout">退出</div></li>
        </ul>
      </div>
    </el-header>
  </div>
</template>


<script>
export default {
  name: "myHeader",
  data() {
    return {
      navBarFixed: false,
      style: {},
      opacity: 0,
      //获取localStorage中保存的后台返回的用户信息
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    };
  },
  methods: {
    //   路由跳转
    index() {
      this.$router.push("/");
    },
    personal() {
      this.$router.push("/personal");
    },
    mynews() {
      this.$router.push("/mynews");
    },
    myhouse() {
      this.$router.push("/myhouse");
    },
    myroomie() {
      this.$router.push("/myroomie");
    },

    // 退出方法
    logout() {
      // 清除用户信息
      localStorage.setItem("user", JSON.stringify(null)); // 存储用户信息到浏览器
      // 返回登录界面
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
/* 头部样式 */

.el-header {
  background-color: #3d3b41;
  color: white;
  height: 40px !important;
}

.el-link.el-link--default span {
  color: white;
}

.el-header .header .el-link:hover {
  color: #ffac38;
}

.el-header .header {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding-right: 100px;
  height: 20px;
}

.header ul li {
  display: inline-block;
  /* line-height: 60px; */
  padding: 10px;
  cursor: pointer;
  font-size: 13px;
}

ul li div {
  float: left;
  padding-top: 20px;
}
</style>